<!-- 
种鹅唯一编号

性别

日龄

体温

体重

上报人

疫苗状态
 -->
 <template>
   <view class="data-report-container">
     <view class="form-section">
       <!-- 种鹅基本信息 -->
       <view class="form-item">
         <text class="label">种鹅编号<text class="red">*</text></text>
         <input 
           v-model="formData.gooseId" 
           placeholder="请输入唯一编号"
           class="input-field"
         />
       </view>	
 
 <!-- 性别 -->
 <view class="form-item">
   <text class="label">性别 <text class="red">*</text></text>
   <picker 
     @change="onFeedTypeChange" 
     :value="formData.sexType" 
     :range="sexTypeOptions"
     class="picker"
   >
     <view>{{ formData.sexType || '请选择性别' }}</view>
   </picker>
 </view>
 
 <!-- 日龄 -->
  <view class="form-item">
    <text class="label">日龄(天)<text class="red">*</text></text>
    <input 
      v-model="formData.age"
      type="number"
      placeholder="当前日龄"
      class="input-field"
    />
  </view>
       <!-- 健康监测 -->
       <view class="form-item">
         <text class="label">体温(℃)<text class="red">*</text></text>
         <input 
           v-model="formData.temperature"
           type="number"
           placeholder="38.0-42.0"
           class="input-field"
         />
       </view>
 
       <view class="form-item">
         <text class="label">体重(kg)<text class="red">*</text></text>
         <input 
           v-model="formData.weight"
           type="number"
           placeholder="当前体重"
           class="input-field"
         />
       </view>
 
   
       <view class="form-item">
         <text class="label">记录人<text class="red">*</text></text>
         <input 
           v-model="formData.worker"
           type="number"
           placeholder="记录人姓名"
           class="input-field"
         />
       </view>
 
 
       <view class="form-item">
         <text class="label">疫苗状态<text class="red">*</text></text>
         <radio-group @change="onVaccineChange" class="radio-group">
           <label class="radio-item">
             <radio value="vaccinated" color="#07c160" /> 已接种
           </label>
           <label class="radio-item">
             <radio value="unvaccinated" color="#07c160" /> 未接种
           </label>
         </radio-group>
       </view>
 
       <!-- 提交按钮 -->
       <button 
         class="submit-btn" 
         @click="submitForm"
         :disabled="!isFormValid"
       >
         提交数据
       </button>
     </view>
   </view>
 </template>
 
 <script setup>
 import { ref, computed } from 'vue'
 
 // 表单数据模型
 const formData = ref({
   gooseId: '',//编号
   age: '',//日龄
   temperature: '',//温度
   weight: '',//体重
   sex: '',//性别
   worker: '',//上报人
   vaccineStatus: ''//疫苗接种状态
 })
 
 // 选项数据
 const breedOptions = ['狮头鹅', '溆浦鹅', '四川白鹅', '其他品种']
 const sexTypeOptions = ['公', '母']
 
 // 表单校验
 const isFormValid = computed(() => {
   return (
     formData.value.gooseId &&
     formData.value.age &&
     formData.value.temperature >= 38 &&
     formData.value.temperature <= 42 &&
     formData.value.weight > 0 &&
     formData.value.sex &&
     formData.value.worker > 0 &&
     formData.value.vaccineStatus
   )
 })
 
 // 事件处理
 const onBreedChange = (e) => {
   formData.value.breed = breedOptions[e.detail.value]
 }
 
 const onFeedTypeChange = (e) => {
   formData.value.sex = sexTypeOptions[e.detail.value]
 }
 
 const onVaccineChange = (e) => {
   formData.value.vaccineStatus = e.detail.value
 }
 
 const submitForm = () => {
   uni.showLoading({ title: '提交中...' })
   // 这里添加实际提交逻辑
   setTimeout(() => {
     uni.hideLoading()
     uni.showToast({ title: '提交成功', icon: 'success' })
     resetForm()
   }, 1500)
 }
 
 const resetForm = () => {
   formData.value = {
     gooseId: '',
     age: '',
     temperature: '',
     weight: '',
     sex: '',
     worker: '',
     vaccineStatus: ''
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .data-report-container {
   padding: 20rpx;
   background-color: #f8f8f8;
   min-height: 100vh;
 }
 
 .form-section {
   background: white;
   border-radius: 16rpx;
   padding: 30rpx;
   box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
 }
 
 .form-item {
   margin-bottom: 5rpx;
   border-bottom: 1rpx solid #eee;
   padding-bottom: 30rpx;
 
   &:last-child {
     border-bottom: none;
     margin-bottom: 0;
   }
 }
 
 .label {
   display: block;
   color: #333;
   font-size: 30rpx;
   margin-bottom: 20rpx;
   font-weight: 500;
 }
 
 .input-field {
   height: 80rpx;
   border: 1rpx solid #ddd;
   border-radius: 8rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
 }
 
 .picker {
   height: 80rpx;
   line-height: 80rpx;
   border: 1rpx solid #ddd;
   border-radius: 8rpx;
   padding: 0 20rpx;
   color: #666;
 }
 
 .radio-group {
   display: flex;
   gap: 40rpx;
 }
 
 .radio-item {
   display: flex;
   align-items: center;
   font-size: 28rpx;
 }
 
 .submit-btn {
   margin-top: 30rpx;
   background-color: #07c160;
   color: white;
   border-radius: 50rpx;
   font-size: 32rpx;
   height: 90rpx;
   line-height: 90rpx;
 
   &[disabled] {
     background-color: #07c160;
     color:white;
   }
 }
 .red{
	 color: red;
 }
 </style>